<template>
  <div v-loading="loading" element-loading-text="数据加载中...">
    <!-- <el-divider content-position="left">
      <span class="title">超时单统计</span>
    </el-divider> -->
    <div ref="chartRef" class="chart"></div>
  </div>
</template>
<script setup>
import { onMounted, watch } from "vue";
import * as echarts from "echarts";
import { deepClone } from "@/utils/index.js";
// import { geneticResourcesList } from '@/api/system/geneticResources';
// import { EChartsOption } from 'echarts';

let pieColors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"];
let richColors = {};
pieColors.forEach((item, idx) => {
  richColors[`color${idx}`] = {
    fontSize: 14,
    color: item,
  };
});

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  loading: true,
});

const state = reactive({
  dataOrigin: [],
  chartRef: null,
  chart: null,
  options: {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "超时单统计",
      left: "left",
    },
    legend: {
      // orient: "vertical",
      left: "right",
      top: "30",
      right: '0'
    },
    series: [
      {
        name: "超时单统计",
        type: "pie",
        radius: "52%",
        center: ["50%", "65%"],
        color: pieColors,
        data: [
          { value: 872, name: "下单" },
          { value: 160, name: "配门" },
          { value: 350, name: "表面下线" },
          { value: 210, name: "整体打包" },
        ],
        // roseType: "radius",
        animationType: "scale",
        animationEasing: "exponentialInOut",
        animationDelay: function () {
          return Math.random() * 400;
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        label: {
          formatter: (params) => {
            // "{name|{b}} {value|{c}单}"
            return `{color${params.dataIndex}|${params.name} ${params.value}单}`;
          },
          rich: richColors,
        },
      },
    ],
  },
});
watch(
  () => props.data,
  () => {
    setOptions();
  }
);
const { dataOrigin, chartRef, options, chart } = toRefs(state);
const setOptions = () => {
  if (!chart.value) chart.value = echarts.init(chartRef.value);
  options.value.series[0].data = props.data;
  options.value.title.text = `超时单统计（${options.value.series[0].data.reduce(
    (t, e) => t + +e.value,
    0
  )}）`;
  chart.value.setOption(options.value);
};
onMounted(() => {
  setOptions();
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
  sideBarAutoResize();
});
function sideBarAutoResize() {
  let sideBarElm = document.getElementsByClassName("sidebar-container")[0];
  sideBarElm &&
    sideBarElm.addEventListener("transitionend", (e) => {
      if (e.propertyName === "width") {
        chart.value.resize();
      }
    });
}
watch(
  () => props.data,
  (newVal) => {
    dataOrigin.value = deepClone(newVal);
    // Object.values(dataOrigin.value).forEach((item, i) => {
    //   options.value.series[0].data[i].value = item;
    // });
    // setOptions();
  },
  {}
);
</script>
<style scoped>
.chart{
  width: 100%;
  height: 400px;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
</style>
